import { Component, OnInit } from '@angular/core';
import { NzFormatEmitEvent } from 'ng-zorro-antd/tree';
import { Router} from '@angular/router'
import G6 from '@antv/g6';

@Component({
  selector: 'app-substation',
  templateUrl: './substation.component.html',
  styleUrls: ['./substation.component.less']
})
export class SubstationComponent implements OnInit {

  optionList: string[] = [];
  selectedUser = null;
  isLoading = false;
  dataTemp = {}

  nodes = [
    {
      title: '长沙一号线',
      key: '1',
      expanded: true,
      children: [
        {
          title: '主所A',
          key: '1001',
          expanded: true,
          isLeaf: true
        },
        {
          title: '牵混所A',
          key: '1002',
          expanded: true,
          isLeaf: true
        },
        {
          title: '跟随所A',
          key: '1003',
          expanded: true,
          isLeaf: true
        },
        {
          title: '主所B',
          key: '1004',
          expanded: true,
          isLeaf: true
        },
        {
          title: '降压所A',
          key: '1005',
          expanded: true,
          isLeaf: true
        },
        {
          title: '牵引所A',
          key: '1006',
          expanded: true,
          isLeaf: true
        }
      ]
    },
    {
      title: '株洲线',
      key: '1',
      expanded: true,
      children: [
        {
          title: '主所',
          key: '1001',
          expanded: true,
          isLeaf: true
        },
        {
          title: '牵混所',
          key: '1002',
          expanded: true,
          isLeaf: true
        },
        {
          title: '跟随所',
          key: '1003',
          expanded: true,
          isLeaf: true
        },
        {
          title: '牵引所',
          key: '1004',
          expanded: true,
          isLeaf: true
        },
        {
          title: '降压所',
          key: '1005',
          expanded: true,
          isLeaf: true
        }
      ]
    }
  ];
  constructor(public router:Router) { }
  

  ngOnInit(): void {
      this.showSelectTodo()
      this.showCsSubwayLine()
      this.showZhuzhouSubLine()
      
  }

  nzEvent(event: NzFormatEmitEvent): void {
    this.router.navigate(['/substationDetails/'])
  }

  showCsSubwayLine(): void {
    const canvasData = {
      // 点集
      nodes: [
        {
          id: 'node1',
          type: 'circle', // 节点类型
          size: 35,
          x: 100,
          y: 200,
          label: '长沙牵引所',
          labelCfg: {
            position: 'right',
            offset: 5,
            style: {
              fontSize: 14,
              fill: 'red',
              stroke: 'red',
              opacity: 0.9
            }
          },
          style: {
            fill: 'red',
            stroke: 'red',
            lineWidth: 2,
            cursor: 'pointer',
          }
        },
        {
          id: 'node2',
          type: 'circle', // 节点类型
          size: 35,
          x: 160,
          y: 360,
          label: '长沙降压所',
          labelCfg: {
            position: 'right',
            offset: 5,
            style: {
              fontSize: 14,
              fill: '#33ff33',
              stroke: '#33ff33',
              opacity: 0.9
            }
          },
          style: {
            fill: '#33ff33',
            stroke: '#33ff33',
            lineWidth: 2,
            cursor: 'pointer',
          }
        },
        {
          id: 'node3',
          type: 'circle', // 节点类型
          size: 35,
          x: 300,
          y: 100,
          label: '长沙牵混所',
          labelCfg: {
            position: 'right',
            offset: 5,
            style: {
              fontSize: 14,
              fill: '#ffff00',
              stroke: '#ffff00',
              opacity: 0.9
            }
          },
          style: {
            fill: '#ffff00',
            stroke: '#ffff00',
            lineWidth: 2,
            cursor: 'pointer',
          }
        },
        {
          id: 'node4',
          type: 'triangle', // 节点类型
          size: 22,
          x: 540,
          y: 320,
          label: '长沙跟随所',
          labelCfg: {
            position: 'right',
            offset: 5,
            style: {
              fontSize: 14,
              fill: 'red',
              stroke: 'red',
              opacity: 0.9
            }
          },
          anchorPoints: [
            [0.5, 0.5],
            [1, 1],
          ],
          style: {
            fill: 'red',
            stroke: 'red',
            lineWidth: 2,
            cursor: 'pointer',
          }
        },
        {
          id: 'node5',
          type: 'diamond', // 节点类型
          size: 40,
          x: 640,
          y: 120,
          label: '长沙主所',
          labelCfg: {
            position: 'right',
            offset: 5,
            style: {
              fontSize: 14,
              fill: '#33ff33',
              stroke: '#33ff33',
              opacity: 0.9
            }
          },
          anchorPoints: [
            [0.5, 0.2]
          ],
          style: {
            fill: '#33ff33',
            stroke: '#33ff33',
            lineWidth: 2,
            cursor: 'pointer',
          }
        }
      ],
      // 边集
      edges: [
        // 表示一条从 node1 节点连接到 node2 节点的边
        {
          source: 'node1',
          target: 'node2',
          style: {
            fill: 'red',
            stroke: 'red',
            lineWidth: 2,
            cursor: 'pointer',
          }
        },
        {
          source: 'node2',
          target: 'node3',
          style: {
            fill: 'red',
            stroke: 'red',
            lineWidth: 2,
            cursor: 'pointer',
          }
        },
        {
          source: 'node3',
          target: 'node4',
          // 该边连入 source 点的第 0 个 anchorPoint，
          sourceAnchor: 0,
          // 该边连入 target 点的第 0 个 anchorPoint，
          targetAnchor: 0,
          style: {
            fill: 'red',
            stroke: 'red',
            lineWidth: 2,
            cursor: 'pointer',
          }
        },
        {
          source: 'node4',
          target: 'node5',
          style: {
            fill: 'red',
            stroke: 'red',
            lineWidth: 2,
            cursor: 'pointer',
          }
        }
      ],
    };

    G6.registerEdge(
      'circle-running',
      {
        afterDraw(cfg, group) {

          // 获得当前边的第一个图形，这里是边本身的 path
          const shape = group.get('children')[0];
          // 边 path 的起点位置
          const startPoint = shape.getPoint(0);
    
          // 添加红色 circle 图形
          const circle = group.addShape('circle', {
            attrs: {
              x: startPoint.x,
              y: startPoint.y,
              fill: 'red',
              r: 3,
            },

            name: 'circle-shape',
          });
    
          // 对红色圆点添加动画
          circle.animate(
            (ratio) => {
              // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。
              // 根据比例值，获得在边 path 上对应比例的位置。
              const tmpPoint = shape.getPoint(ratio);
              // 返回需要变化的参数集，这里返回了位置 x 和 y
              return {
                x: tmpPoint.x,
                y: tmpPoint.y,
              };
            },
            {
              repeat: true, // 动画重复
              duration: 1000,
            },
          ); // 一次动画的时间长度
        },
      },
      'line',
    ); // 该自定义边继承内置直线line
 
const subwayLine = '长沙一号线'
const tooltip = new G6.Tooltip({
  offsetX: 10,
  offsetY: 20,
  getContent(e) {
    const outDiv = document.createElement('div');
    outDiv.style.width = '160px';
    outDiv.innerHTML = `
      <h4>${subwayLine}</h4>
      <div>
          ${e.item.getModel().label || e.item.getModel().id}
      </div>`
    return outDiv
  },
  itemTypes: ['node', 'edge']
});

    const graph = new G6.Graph({
      container: document.getElementById('csContainer'),
      width: 800,
      height: 600,
      plugins: [tooltip], // 配置 Tooltip 插件
      defaultEdge: {
        type: 'circle-running',
        style: {
          lineWidth: 2,
          stroke: '#bae7ff',
        },
      },
    });
    let container = document.getElementById('container');
    if (typeof window !== 'undefined')
  window.onresize = () => {
    if (!graph || graph.get('destroyed')) return;
    if (!container || !container.scrollWidth || !container.scrollHeight) return;
    graph.changeSize(container.scrollWidth, container.scrollHeight);
  };

    // 读取数据
    graph.data(canvasData);
    // 渲染图
    graph.render();
    this.dataTemp = graph.save()
    console.log(graph.save())
  }

  showZhuzhouSubLine(): void {
    const canvasData = {
      // 点集
      nodes: [
        {
          id: 'node1',
          type: 'diamond', // 节点类型
          size: 40,
          x: 300,
          y: 250,
          label: '株洲跟随所',
          labelCfg: {
            position: 'right',
            offset: 5,
            style: {
              fontSize: 14,
              fill: 'red',
              stroke: 'red',
              opacity: 0.9
            }
          },
          anchorPoints: [
            [0.5, 0.5]
          ],
          style: {
            fill: 'red',
            stroke: 'red',
            lineWidth: 2,
            cursor: 'pointer',
          }
        },
        {
          id: 'node2',
          type: 'circle', // 节点类型
          size: 35,
          x: 400,
          y: 350,
          label: '株洲主所',
          labelCfg: {
            position: 'right',
            offset: 5,
            style: {
              fontSize: 14,
              fill: '#33ff33',
              stroke: '#33ff33',
              opacity: 0.9
            }
          },
          style: {
            fill: '#33ff33',
            stroke: '#33ff33',
            lineWidth: 2,
            cursor: 'pointer',
          }
        },
        {
          id: 'node3',
          type: 'circle', // 节点类型
          size: 35,
          x: 550,
          y: 220,
          label: '株洲牵引所',
          labelCfg: {
            position: 'right',
            offset: 5,
            style: {
              fontSize: 14,
              fill: '#ffff00',
              stroke: '#ffff00',
              opacity: 0.9
            }
          },
          style: {
            fill: '#ffff00',
            stroke: '#ffff00',
            lineWidth: 2,
            cursor: 'pointer',
          }
        },
        {
          id: 'node4',
          type: 'circle', // 节点类型
          size: 35,
          x: 400,
          y: 100,
          label: '株洲降压所',
          labelCfg: {
            position: 'right',
            offset: 5,
            style: {
              fontSize: 14,
              fill: 'red',
              stroke: 'red',
              opacity: 0.9
            }
          },
          anchorPoints: [
            [0.5, 0.5],
            [1, 1],
          ],
          style: {
            fill: 'red',
            stroke: 'red',
            lineWidth: 2,
            cursor: 'pointer',
          }
        },
        {
          id: 'node5',
          type: 'triangle', // 节点类型
          size: 22,
          x: 250,
          y: 50,
          label: '株洲牵混所',
          labelCfg: {
            position: 'right',
            offset: 5,
            style: {
              fontSize: 14,
              fill: '#33ff33',
              stroke: '#33ff33',
              opacity: 0.9
            }
          },
          anchorPoints: [
            [1, 1]
          ],
          style: {
            fill: '#33ff33',
            stroke: '#33ff33',
            lineWidth: 2,
            cursor: 'pointer',
          }
        }
      ],
      // 边集
      edges: [
        // 表示一条从 node1 节点连接到 node2 节点的边
        {
          source: 'node1',
          target: 'node2',
          style: {
            fill: '#33ff33',
            stroke: '#33ff33',
            lineWidth: 2,
            cursor: 'pointer',
          }
        },
        {
          source: 'node2',
          target: 'node3',
          style: {
            fill: '#33ff33',
            stroke: '#33ff33',
            lineWidth: 2,
            cursor: 'pointer',
          }
        },
        {
          source: 'node3',
          target: 'node4',
          // 该边连入 source 点的第 0 个 anchorPoint，
          sourceAnchor: 0,
          // 该边连入 target 点的第 0 个 anchorPoint，
          targetAnchor: 0,
          style: {
            fill: '#33ff33',
            stroke: '#33ff33',
            lineWidth: 2,
            cursor: 'pointer',
          }
        },
        {
          source: 'node4',
          target: 'node5',
          style: {
            fill: '#33ff33',
            stroke: '#33ff33',
            lineWidth: 2,
            cursor: 'pointer',
          }
        }
      ],
    };

    G6.registerEdge(
      'circle-running',
      {
        afterDraw(cfg, group) {
          
          // 获得当前边的第一个图形，这里是边本身的 path
          const shape = group.get('children')[0];
          // 边 path 的起点位置
          const startPoint = shape.getPoint(0);
    
          // 添加红色 circle 图形
          const circle = group.addShape('circle', {
            attrs: {
              x: startPoint.x,
              y: startPoint.y,
              fill: '#33ff33',
              r: 3,
            },
            name: 'circle-shape',
          });
    
          // 对红色圆点添加动画
          circle.animate(
            (ratio) => {
              // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。
              // 根据比例值，获得在边 path 上对应比例的位置。
              const tmpPoint = shape.getPoint(ratio);
              // 返回需要变化的参数集，这里返回了位置 x 和 y
              return {
                x: tmpPoint.x,
                y: tmpPoint.y,
              };
            },
            {
              repeat: true, // 动画重复
              duration: 1000,
            },
          ); // 一次动画的时间长度
        },
      },
      'line',
    ); // 该自定义边继承内置直线line

const subwayLine = '株洲线'
const tooltip = new G6.Tooltip({
  offsetX: 10,
  offsetY: 20,
  getContent(e) {
    const outDiv = document.createElement('div');
    outDiv.style.width = '160px';
    outDiv.innerHTML = `
      <h4>${subwayLine}</h4>
      <div>
          ${e.item.getModel().label || e.item.getModel().id}
      </div>`
    return outDiv
  },
  itemTypes: ['node', 'edge']
});

    const graph = new G6.Graph({
      container: document.getElementById('zzContainer'),
      width: 800,
      height: 600,
      plugins: [tooltip], // 配置 Tooltip 插件
      defaultEdge: {
        type: 'circle-running',
        style: {
          lineWidth: 2,
          stroke: '#bae7ff',
        },
      },
    });
    let container = document.getElementById('container');
    if (typeof window !== 'undefined')
  window.onresize = () => {
    if (!graph || graph.get('destroyed')) return;
    if (!container || !container.scrollWidth || !container.scrollHeight) return;
    graph.changeSize(container.scrollWidth, container.scrollHeight);
  };

    // 读取数据
    graph.data(canvasData);
    // 渲染图
    graph.render();
  }

  showSelectTodo() {
    const canvasData = {
      // 点集
      nodes: [
        {
          id: 'cs',
          type: 'circle', // 节点类型
          size: 12,
          x: 20,
          y: 20,
          label: '长沙一号线',
          labelCfg: {
            position: 'right',
            offset: 8,
            style: {
              fontSize: 12,
              fill: '#ffffffd8',
              stroke: '#ffffffd8',
              opacity: 0.9
            }
          },
          style: {
            fill: 'red',
            stroke: 'red',
            lineWidth: 2,
            cursor: 'pointer',
          }
        },
        {
          id: 'zz',
          type: 'circle', // 节点类型
          size: 12,
          x: 20,
          y: 50,
          label: '株洲线',
          labelCfg: {
            position: 'right',
            offset: 8,
            style: {
              fontSize: 12,
              fill: '#ffffffd8',
              stroke: '#ffffffd8',
              opacity: 0.9
            }
          },
          style: {
            fill: '#33ff33',
            stroke: '#33ff33',
            lineWidth: 2,
            cursor: 'pointer',
          }
        }
      ]
    };

    const graph = new G6.Graph({
      container: document.getElementById('todoCanvas'),
      width: 800,
      height: 600,
      modes: {
        default: []
      }
    });
    graph.on('node:click', (ev) => {
      const shape = ev.target;
      const node = ev.item;
      console.log('111111')
    });

    // 读取数据
    graph.data(canvasData);
    // 渲染图
    graph.render();


  }



}
